<template>
  <div>
    <div class="margin-container-list" v-loading="loading" element-loading-text="加载中">
      <el-row>
        <el-form :inline="true" :model="searchListQuery" label-width="120px">
          <el-col :span="18">
            <el-form-item label="批次名称：">
              <el-select v-model="searchListQuery.printBatchId" class="width-400" @change="batchChange">
                <el-option v-for="item in batchList" :key="item.printBatchId" :label="item.printBatchName" :value="item.printBatchId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="面单号：">
              <el-input v-model="searchListQuery.trackingNo" class="width-400"></el-input>
            </el-form-item>
            <el-form-item label="" class="width-400">
              <el-button type="primary" @click="doGenerateTrackingNo" class="width-140">获取面单号</el-button>
              <span>&nbsp;先对没有面单号的订单获取面单号</span>
            </el-form-item>
            <el-form-item label="" class="width-400">
              <el-button type="primary" @click="doPrint" class="width-140">开始打印</el-button>
              <span>&nbsp;再对“未打印”的订单打印快递面单</span>
            </el-form-item>
             <el-form-item label="" class="width-400">
              <el-button plain @click="doDelivery" class="width-140">确认发货</el-button>
              <span>&nbsp;最后对“已打印”的订单作确认发货</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <span>{{searchListQuery.expressName}}</span>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="doTrackingNoSearch">定位到指定面单号</el-button>
            </el-form-item>
            <el-form-item label="">
              <el-checkbox v-model="showAllPrintStatus" @change="printStatusChange">显示所有打印结果订单</el-checkbox>
            </el-form-item>
            <el-form-item label="">
              <el-checkbox v-model="showAllOrderStatus" @change="orderStatusChange">显示所有状态订单</el-checkbox>
            </el-form-item>
            <el-form-item label="">
              <el-button plain @click="doRefresh" class="width-140">刷新</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="dataList">
          <el-table-column width="50px" label="序号" prop="sortNo" align="center"></el-table-column>
          <el-table-column min-width="180px" label="订单号" header-align="center">
            <template slot-scope="scope">
              <span>{{scope.row.orderNo}}</span>
              <br>
              <span style="color: #409EFF">面单&nbsp;{{scope.row.trackingNo}}</span>
            </template>
          </el-table-column>
          <el-table-column width="160px" label="收货人" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.customerNickname}}</span>
              <br>
              <span>{{scope.row.customerPhone}}</span>
            </template>
          </el-table-column>
          <el-table-column width="100px" label="打印结果" align="center">
            <template slot-scope="scope">
              <span class="font-green" v-if="scope.row.printStatus === 1">已打印</span>
              <span class="font-red" v-else>未打印</span>
            </template>
          </el-table-column>
          <el-table-column width="100px" label="订单状态" align="center">
            <template slot-scope="scope">
              <span>{{labels[scope.row.orderStatus]}}</span>
            </template>
          </el-table-column>
          <el-table-column width="160px" label="操作" header-align="center" align="right">
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.printStatus === 1" @click="doUpdateStatus(scope.row, 0)">标记为未打印</el-button>
              <el-button type="text" v-else @click="doUpdateStatus(scope.row, 1)">标记为已打印</el-button>
              <el-button type="text" @click="doBatchUpdateStatus(scope.row, 0)">往下全部记为未打印</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="searchListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { listByEnterpriseId } from '@/api/goods/orderPrintBatch'
  import { pagingByBatchId, getPrintTemplateByBatchId, updateTrackingNoByBatchId, updatePrintStatus, batchUpdatePrintStatus } from '@/api/goods/orderPrintBatchDetail'
  import { doDeliveryByBatchId } from '@/api/goods/orderPrintBatch'
  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      initBatchId: {
        type: String
      }
    },
    data() {
      return {
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          printBatchId: '',
          enterpriseExpressId: '',
          expressName: '',
          trackingNo: '',
          orderStatus: 1,
          printStatus: ''
        },
        labels: {
          '0': '待付款',
          '1': '待发货',
          '2': '待收货',
          '3': '已收货',
          '4': '已完成'
        },
        showAllOrderStatus: false,
        showAllPrintStatus: true,
        // 获取面单flag
        generateFlag: false,
        total: null,
        loading: false,
        dataList: [],
        // 批次列表
        batchList: []
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.resetSearch()
          this.initList()
        }
      }
    },
    // 初始化页面
    created() {
      this.initList()
    },
    filters: {
    },
    mounted() {
    },
    methods: {
      // 初始化数据
      initList() {
        listByEnterpriseId({ enterpriseId: this.getEnterpriseId() }).then(response => {
          this.batchList = response.data
          this.searchListQuery.printBatchId = this.initBatchId
          this.batchChange(this.initBatchId)
        })
      },
      // 列表数据
      initDataList() {
        this.loading = true
        this.searchListQuery.asc = 'sortNo'
        pagingByBatchId(this.searchListQuery).then(response => {
          this.loading = false
          if (response.isError) {
            this.total = 0
            this.dataList = []
          } else {
            this.total = response.data.total
            this.dataList = response.data.records
            if (this.generateFlag) {
              this.generateFlag = false
              this.dataList.forEach(o => { o.trackingNo = o.trackingNo ? o.trackingNo : '获取失败' })
            }
          }
        })
      },
      // 重置
      resetSearch() {
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          printBatchId: '',
          enterpriseExpressId: '',
          expressName: '',
          trackingNo: '',
          orderStatus: 1,
          printStatus: 0
        }
        this.showAllPrintStatus = true
        this.showAllOrderStatus = false
      },
      // 批次选择事件
      batchChange(val) {
        this.batchList.forEach(element => {
          if (element.printBatchId === val) {
            this.searchListQuery.expressName = element.expressName
            this.searchListQuery.enterpriseExpressId = element.enterpriseExpressId
            return
          }
        })
        this.initDataList()
      },
      // 打印状态选择事件
      printStatusChange(val) {
        this.searchListQuery.printStatus = val ? '' : 0
        this.initDataList()
      },
      // 订单状态选择事件
      orderStatusChange(val) {
        this.searchListQuery.orderStatus = val ? '' : 1
        this.initDataList()
      },
      // 定位面单号事件
      doTrackingNoSearch() {
        if (this.searchListQuery.trackingNo) this.initDataList()
        else this.$message({ type: 'warning', message: '请输入面单号!' })
      },
      // 获取面单号事件
      doGenerateTrackingNo() {
        this.loading = true
        this.generateFlag = true
        updateTrackingNoByBatchId({ printBatchId: this.searchListQuery.printBatchId }).then(response => {
          this.loading = false
          if (response.isError) return
          this.initDataList()
        })
      },
      // 打印事件
      doPrint() {
        this.loading = true
        getPrintTemplateByBatchId({ printBatchId: this.searchListQuery.printBatchId }).then(response => {
          this.loading = false
          if (response.isError) return
          this.initDataList()
          if (response.data) {
            const eOrder = window.open('', 'eOrder', 'toolbar=no,scrollbars=yes,menubar=no')
            eOrder.document.body.innerHTML = response.data
            eOrder.print()
          } else {
            this.$message({ type: 'warning', message: '无未打印订单！' })
          }
        })
      },
      // 确认发货事件
      doDelivery() {
        this.loading = true
        doDeliveryByBatchId({ printBatchId: this.searchListQuery.printBatchId }).then(response => {
          this.loading = false
          if (response.isError) return
          this.$message({ type: 'success', message: '保存成功' })
          this.initDataList()
        })
      },
      // 刷新事件
      doRefresh() {
        this.initDataList()
      },
      // 标记打印状态事件
      doUpdateStatus(row, printStatus) {
        const form = {
          printBatchDetailId: row.printBatchDetailId,
          printStatus: printStatus
        }
        updatePrintStatus(form).then(response => {
          if (response.isError) return
          this.$message({ type: 'success', message: '保存成功' })
          this.initDataList()
        })
      },
      // 批量标记打印状态事件
      doBatchUpdateStatus(row, printStatus) {
        const form = {
          printBatchDetailId: row.printBatchDetailId,
          printStatus: printStatus
        }
        batchUpdatePrintStatus(form).then(response => {
          if (response.isError) return
          this.$message({ type: 'success', message: '保存成功' })
          this.initDataList()
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initDataList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initDataList()
      }
    }
  }
</script>

<style lang="less" scoped>
.width-400 {
  width: 400px;
}
</style>